<template>
	<!-- <M-Nav title="选择词书"></M-Nav> -->
	<!-- <scroll-view scroll-y="true" class="containerbox" style="position: relative; z-index: 99999;">
		<view class="px-40 pt-30" style="display: grid; grid-template-columns: repeat(3, 1fr); gap: 30rpx;">
			<view class="items" v-for="item,index in flowlist" @click="godetailEvent(item)">
				<view class="imgbox" :style="`background: url(${item.icon?.url}) center/cover #fea655;`"></view>
				<view class="text-30 mt-20">{{item.name}}</view>
				<view class="text-26">{{item.difficulty?.name}}</view>
			</view>
		</view>
	</scroll-view> -->
	<view class="containerbox bgc-white">
		<uv-navbar title="选择词书" auto-back placeholder />
		
		<template v-if="!loading && flowlist.length">
			<scroll-view scrollY class="containerbox">
				<view class="boxs">
					<view class="items" @click="godetailEvent(item, index)" :class="{ actived: courseIndex === index }" v-for="item, index in flowlist" :key="item.id">{{ item.name }}</view>
				</view>
			</scroll-view>
			
			<view class="flex items-center justify-between bottombox">
				<view class="btn bgc-primary" @click="begin">确认选择</view>
			</view>
		</template>
		
		
		<dw_default :src="`${imageBaseUrl2}/svg/empty.svg`" v-if="!loading && !flowlist.length" class="m-auto" label="暂未开通相关课程~" />
	</view>
</template>

<script setup>
import { usePagination } from '@/common/hooks/usePagination'
import { authOpenPage } from '@/common/hooks/useNavigate'
import { getThesaurusList_api, postBookStart_api } from '@/common/apis/spoken'
import { ref } from 'vue';
import {imageBaseUrl2} from "@/common/config";
// import { useHomeStore } from '@/common/store/home_store.js';

// const homeStore = useHomeStore();

const {
	list: flowlist,
	loadmore,
	message,
	loading,
	refresh
} = usePagination(getThesaurusList_api, {
	auto: true
})

const courseIndex = ref()

async function godetailEvent(item,index){
	// homeStore.setBookData(item)
	// uni.navigateBack()
	
	courseIndex.value = index
	
}

const begin = async () => {
	if(courseIndex.value >= 0) {
		uni.showLoading({
			title: '正在准备',
			mask: true
		})
		let res = await postBookStart_api({type: 1, thesaurusId: flowlist.value[courseIndex.value].id})
		// authOpenPage('/pages/course/spoken/spoken', {
		// 	logId: res.id
		// })
		uni.hideLoading()
		uni.navigateTo({
			url: '/pages/course/spoken/spoken?logId=' + res.id
		})
	} else uni.showToast({ title: '请选择词书', icon: 'none' });
};
</script>

<style lang="scss" scoped>
.imgbox{width: 100%; height: 286rpx; border-radius: 15rpx; background-color: #fea655;}
.boxs{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;padding:32rpx 32rpx}
.items{width:48%;background-color:#f6f6f6;font-size:28rpx;height:120rpx;border-radius:12rpx;display:flex;align-items:center;justify-content:center;margin-bottom:24rpx;padding: 0 10rpx;text-align: center}
.actived{background-color:#f69b2c;color:#fff}
.bottombox{padding:20rpx 32rpx}
.btn{height:80rpx;border-radius:12rpx;flex:1;text-align:center;line-height:80rpx;color:#fff;font-size:28rpx}
</style>